<template>
  <view class="navigation-bar_box w-full flex justify-between items-center">
    <el-icon size="20" class="navigation-bar_icon" @click="back"><ArrowLeftBold /></el-icon>
    <view class="navigation-bar_title w-full" :style="{ color: color }">
      {{ title }}
    </view>
  </view>
</template>
<script setup>
import { ArrowLeftBold } from "@element-plus/icons-vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#409eff",
  },
});
const back = () => {
  uni.navigateBack();
};
</script>
<style lang="scss" scoped>
.navigation-bar_ {
  &box {
    background-color: $uni-bg-color;
    height: $uni-navigation-height;
    position: relative;
  }
  &icon {
    position: absolute;
    left: 30rpx;
  }
  &title {
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
  }
}
</style>
